<!doctype html>  
<html lang="es">

    <head>
        <meta charset="utf-8">

        <title>CID Secure</title>
        <link rel="stylesheet" href="css/demo.css">
        <link rel="stylesheet" href="css/estilos.css">

        <link rel="stylesheet" href="css/iview.css" />
        <link rel="stylesheet" href="css/skin 1/style.css" />

        <!--scripts animacion        -->

        <script src="js/iview.min.js"></script>
        <script src="js/iview.pack.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.js"></script>
        <script type="text/javascript" src="js/raphael-min.js"></script>

        <script src="js/iview.js"></script>
        <script>
            $(document).ready(function(){
                $('#iview').iView({
                    pauseTime: 7000,
                    directionNav: false,                    
                    controlNav: true,
                    tooltipY: -15
                });
                $('#tweets').jQTwitter({
                    username: 'CIDsecureLoja',
                    count: 10,
                    show_image: true
                                    
                });
            });
        </script>
        <!--scripts twitter        -->
        <!--        <script type="text/javascript" src="js/twitter/jQuery.js"></script>-->

        <script type="text/javascript" src="js/twitter/jquery.jQTwitter.js"></script>
        <!--estilos contenido        -->
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>

        <div class="meny">
            <h2>Visita Tambi&eacute;n</h2>
            <ul>
                <li><a href="http://lab.hakim.se/avgrund/">Avgrund</a></li>
                <li><a href="http://lab.hakim.se/radar/">Radar</a></li>
                <li><a href="http://lab.hakim.se/forkit-js/">forkit.js</a></li>
                <li><a href="http://lab.hakim.se/scroll-effects/">stroll.js</a></li>
                <li><a href="http://lab.hakim.se/zoom-js">zoom.js</a></li>
                <li><a href="http://lab.hakim.se/reveal-js">reveal.js</a></li>
                <li><a href="http://itunes.apple.com/us/app/sinuous/id543097218">Sinuous for iOS</a></li>
                <li><a href="http://hakim.se/experiments/css/domtree/">DOM Tree</a></li>
                <li><a href="http://hakim.se/experiments/css/holobox/">Holobox</a></li>
                <li><a href="http://hakim.se/experiments/html5/404/netmag.html">404</a></li>
            </ul>
        </div>
        <div class="meny-arrow"></div>
        <div class="contents">
            <header>
                <figure><img src="images/Logo-Horizontal.png"></figure>
                <nav id="menu">
                    <ul id="sombra">
                        <li><a href="index.php">Inicio</a></li>
                        <li><a href="portafolio.html">Portafolio</a></li>
                        <li><a href="#">Clientes</a></li>
                        <li><a href="servicios.html">Servicios</a></li>
                        <li><a href="#">Cont&aacute;ctenos</a></li>
                    </ul>
                </nav>
            </header>
            <div class="panel">
                <div class="content">
                    <article>
                        <h2>S</h2>
                        <p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
                        <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome effects...</p>
                    </article>

                    <footer>
                        <!--          son los wigets de redes sociales y eso  -->
                        <div>
                            <section id="acerca">
                                <header>
                                    <h3>Post recientes</h3>
                                </header>
                                <div id="texto">
                                    <p>Somos una empresa dedicada a proveer servicios de seguridad .....</p>
                                </div>
                            </section>
                            <section id="otrosBlogs">
                                <header>
                                    <h3>Twitter</h3>
                                </header>
                                <div id="texto">

                                    <ul id="tweets">


                                    </ul>


                                </div>

                            </section>
                            <section id="popular">
                                <header>
                                    <h3>Facebook</h3>
                                </header>
                                <div id="texto">
                                    <ul>
                                        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                        <li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
                                        <li><a href="#">Duis aute irure dolor</a></li>
                                        <li><a href="#">Excepteur sint occaecat cupidatat</a></li>
                                    </ul>
                                </div>
                            </section>

                        </div>

                        <div id="autores">
                            <small>
                                Copyright &copy; 2012<br/>
                                Design & Development CIDsecure, Loja-Ecuador
                            </small>
                            <ul id="icons">
                                <li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.jpg" alt=""></a></li>
                                <li><a href="#" class="normaltip" title="Twitter"><img src="images/icon2.jpg" alt=""></a></li>
                                <li><a href="#" class="normaltip" title="Picasa"><img src="images/icon3.jpg" alt=""></a></li>
                                <li><a href="#" class="normaltip" title="YouTube"><img src="images/icon4.jpg" alt=""></a></li>
                            </ul>
                        </div>

                    </footer>
                </div>
            </div>
        </div> 

        <script src="js/meny.min.js"></script>
        <script>
            // Create an instance of Meny
            var meny = Meny.create({
                // The element that will be animated in from off screen
                menuElement: document.querySelector( '.meny' ),

                // The contents that gets pushed aside while Meny is active
                contentsElement: document.querySelector( '.contents' ),

                // [optional] The alignment of the menu (top/right/bottom/left)
                position: Meny.getQuery().p || 'left',

                // [optional] The height of the menu (when using top/bottom position)
                height: 200,

                // [optional] The width of the menu (when using left/right position)
                width: 260,

                // [optional] Distance from mouse (in pixels) when menu should open
                threshold: 40
            });

            // API Methods:
            // meny.open();
            // meny.close();
            // meny.isOpen();
			

            // Embed an iframe if a URL is passed in
            if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
                var contents = document.querySelector( '.contents' );
                contents.style.padding = '0px';
                contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
            }
        </script>

        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </body>
</html>